<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>PSD-TO-HTML</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
    <link rel="stylesheet" href="css/style_base.css">
</head>
<body>
<!-- 封图布局开始 -->
<div id="page-1">
    <div id="page-1-color"></div>
    <div id="page-1-text">
        <a href="#">Hello World</a>
        <p>
        The following sections describe the types of boxes that may be generated in CSS 2.1. A box's type affects, in part, its behavior in the visual formatting model. The 'display' property, described below, specifies a box's type. 
        </p>
    </div>
    <div id="sign-up">
        <div id="sign-up-text">
            <p id="sign-up-text-headline">CREAT YOUR ACCOUNT</p>
            <p id="sign-up-text-nomaltext">IT IS ABSOLUTELY FREE</p>
        </div>
        <div id="sign-up-form">
            <form>
                <input id="form-email" type="email" placeholder="INPUT YOUR EMAIL"> 
                <input id="form-password" type="password" placeholder="INPUT YOUR PASSWORD">
                <button id="form-button" type="submit">SIGN UP</button>
            </form>
        </div>
    </div>
</div>
<!-- 封图布局结束 -->
<!-- 介绍一布局开始 -->
<div id="introduce-01">
    <div id="introduce-01-text">
        <p id="introduce-01-text-smallwords">BOATLOADS OF AWESOME</p>
        <p id="introduce-01-text-bigwords">Ready-made, customizable, HTML landing page sections</p>
    </div>
    <div id="introduce-01-feature">
        <div class="introduce-01-feature-row">
            <div class="introduce-01-feature-content">
                <img class="introduce-01-feature-img" src="https://i.loli.net/2018/06/27/5b32e7fd5e04d.png">
                <div class="introduce-01-feature-content-text-container">
                    <p class="introduce-01-feature-headline">Mobie First</p>
                    <p class="introduce-01-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.</p>
                </div>
            </div>
            <div class="introduce-01-feature-content">
                <img class="introduce-01-feature-img" src="https://i.loli.net/2018/06/27/5b32e7fd5b1c3.png">
                <div class="introduce-01-feature-content-text-container">
                    <p class="introduce-01-feature-headline">Accessibility</p>
                    <p class="introduce-01-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.</p>
                </div>
            </div>
        </div>
        <div class="introduce-01-feature-row">
            <div class="introduce-01-feature-content">
                <img class="introduce-01-feature-img" src="https://i.loli.net/2018/06/27/5b32e7fd5f62b.png">
                <div class="introduce-01-feature-content-text-container">
                    <p class="introduce-01-feature-headline">Fluid Typography</p>
                    <p class="introduce-01-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.</p>
                </div>
            </div>
            <div class="introduce-01-feature-content">
                <img class="introduce-01-feature-img" src="https://i.loli.net/2018/06/27/5b32e7fd5c80b.png">
                <div class="introduce-01-feature-content-text-container">
                    <p class="introduce-01-feature-headline">Customization</p>
                    <p class="introduce-01-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 介绍一布局结束 -->
<!-- 二图布局开始 -->
<div id="page-2">
    <div id="page-2-color"></div>
    <div id="page-2-text">
        <p id="page-2-text-headline">
            Supportive polices for China's smart car
        </p>
        <p id="page-2-text-nomaltext">
            The following sections describe the types of boxes that may be generated in CSS 2.1. A box's type affects, in part, its behavior in the visual formatting model. The 'display' property, described below, specifies a box's type. 
        </p>
        <div id="page-2-text-button">
            <button id="page-2-text-button-01">CHECK OUT FEATURES</button>
            <button id="page-2-text-button-02">TRY PRODUCT FOR FREE</button>
        </div>
    </div>
    <div id="page-2-picture">
        <div id="page-2-picture-left-circle"></div>
        <div id="page-2-picture-right">
            <!-- 备用 sm.ms 图床，速度慢于微博图床
            <img src="https://i.loli.net/2018/06/26/5b323b9e66d9a.png">
            -->
            <img src="http://ww1.sinaimg.cn/large/0064NqSIgy1fsow0m4p3zj30g90f2jtv.jpg">
        </div>
    </div>
</div>
<!-- 二图布局结束 -->
<!-- 介绍二布局开始 -->
<div id="introduce-02">
    <p id="introduce-02-headline">Try Our Awesome Product</p>
    <div id="introduce-02-feature">
        <div class="introduce-02-feature-content">
            <!--备用 sm.ms 图床，速度慢于微博图床
                <img class="introduce-02-feature-img" src="https://i.loli.net/2018/06/26/5b324119905ab.png">
            -->
            <img class="introduce-02-feature-img" src="http://ww1.sinaimg.cn/large/0064NqSIgy1fsowqivg00j303c00za9w.jpg">
            <div class="introduce-02-feature-content-text-container">
                <p class="introduce-02-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.</p>
            </div>
        </div>
        <div class="introduce-02-feature-content">
            <!--备用 sm.ms 图床，速度慢于微博图床
                <img class="introduce-02-feature-img" src="https://i.loli.net/2018/06/26/5b32411991ef4.png">
            -->
            <img class="introduce-02-feature-img" src="http://ww2.sinaimg.cn/large/0064NqSIgy1fsowquxpdcj302300y743.jpg">
            <div class="introduce-02-feature-content-text-container">
                <p class="introduce-01-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.</p>
            </div>
        </div>
        <div class="introduce-02-feature-content">
            <!--备用 sm.ms 图床，速度慢于微博图床
                <img class="introduce-02-feature-img" src="https://i.loli.net/2018/06/26/5b32411993741.png">
            -->
            <img class="introduce-02-feature-img" src="http://ww3.sinaimg.cn/large/0064NqSIgy1fsowr6g1o6j303900vweb.jpg">
            <div class="introduce-02-feature-content-text-container">
                <p class="introduce-02-feature-normaltext">I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.</p>
            </div>
        </div>
    </div>
</div>
<!-- 介绍二布局结束 -->
<hr>
<!-- 介绍三布局开始 -->
<div id="introduce-03">
    <div class="introduce-03-row">
        <img src="http://ww3.sinaimg.cn/large/0064NqSIgy1fsox52zsypj30fu09q47b.jpg" class="introduce-03-row-img-left">
        <div class="introduce-03-row-text-right">
            <p class="introduce-03-row-text-headline">Learn How to Improve Your Personal Business</p>
            <p class="introduce-03-row-text-normaltext">
                I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.
            </p>
        </div>
    </div>
    <div class="introduce-03-row">
        <div class="introduce-03-row-text-left">
            <p class="introduce-03-row-text-headline">Choose Between Two Beautifully  Designed Color Schemes</p>
            <p class="introduce-03-row-text-normaltext">
                I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.
            </p>
        </div>
        <img src="http://ww1.sinaimg.cn/large/0064NqSIgy1fsox5i4lhkj30fu09qjz3.jpg" class="introduce-03-row-img-right">
    </div>
</div>
<!-- 介绍三布局结束 -->
<hr>
<!-- 介绍四布局开始 -->
<div id="introduce-04">
    <p id="introduce-04-headline">Our Awesome Crew</p>
    <p id="introduce-04-normaltext">
        I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.
    </p>
    <div id="introduce-04-feature-1">
        <div class="introduce-04-feature-content"> 
            <div class="introduce-04-feature-content-img-hover"></div> 
            <img class="introduce-04-feature-img" src="http://ww4.sinaimg.cn/large/0064NqSIgy1fsoyphlpbwj30d209g76d.jpg">
        </div>
        <div class="introduce-04-feature-content">
            <div class="introduce-04-feature-content-img-hover"></div>
            <img class="introduce-04-feature-img" src="http://ww3.sinaimg.cn/large/0064NqSIgy1fsoyro5pqxj30d209gjvb.jpg">
        </div>
        </div>
        <div id="introduce-04-feature-2">
        <div class="introduce-04-feature-content">
            <div class="introduce-04-feature-content-img-hover"></div>
            <img class="introduce-04-feature-img" src="http://ww3.sinaimg.cn/large/0064NqSIgy1fsoyqg5q3mj30d209gq6d.jpg">
        </div>
        <div class="introduce-04-feature-content">
            <div class="introduce-04-feature-content-img-hover"></div>
            <img class="introduce-04-feature-img" src="http://ww3.sinaimg.cn/large/0064NqSIgy1fsoyq2qy5pj30d209gq5w.jpg">
        </div>
    </div>
</div>
<!-- 介绍四布局结束 -->
<hr>
<!-- 联系布局开始 -->
<div id="contact">
    <div id="contact-row">
        <div id="contact-form">
            <p id="contact-form-title">FELL FREE TO WRITE US</p>
            <form>
                <span><input id="contact-form-email" placeholder="E-mail"></span>
                <span><input id="contact-form-subject" placeholder="Subject"></span>
                <span><textarea id="contact-form-message" placeholder="Message"></textarea></span>
                <button id="contact-form-button">SEND</button>
            </form>
        </div>
        <div id="contact-text">
            <p id="contact-text-title">Contacts</p>
            <p id="contact-text-normaltext">
                I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.I really think that i am a awesome boy in a palce named Earth.
            </p>
            <div id="contact-text-address">
                <div class="coclassntact-text-address-row">
                    <img src="http://ww3.sinaimg.cn/large/0064NqSIgy1fspfeeh9zcj301c01sdfn.jpg" class="contact-text-address-img">
                    <p class="contact-text-address-text">360 King Street<br/>Feastrvale Trevose,PA 19057</p>
                </div>
                <div class="coclassntact-text-address-row">
                    <img src="http://ww1.sinaimg.cn/large/0064NqSIgy1fspfyq8knoj301p01s0si.jpg" class="contact-text-address-img">
                    <p class="contact-text-address-text">(755)564-84-12</p>
                </div>
                <div class="coclassntact-text-address-row">
                    <img src="http://ww4.sinaimg.cn/large/0064NqSIgy1fspffng5djj302o01rt8i.jpg" class="contact-text-address-img">
                    <p class="contact-text-address-text">KUHAHA@BAIDU.COM</p>
                </div>
            </div>
        </div>
        
    </div>
</div>
<!-- 联系布局结束 -->
<!-- 页脚布局开始 -->
<div id="footer">
    <div class="footer-container">
        <p class="footer-container-headline">LEARN MORE</p>
        <a href="#">How it works?</a>
        <a href="#">Meeting tools</a>
        <a href="#">Live streaming</a>
        <a href="#">Contact method</a>
    </div>
    <div class="footer-container">
        <p class="footer-container-headline">ABOUT US</p>
        <a href="#">About us</a>
        <a href="#">Features</a>
        <a href="#">Privicy police</a>
        <a href="#">Terms & Conditions</a>
    </div>
    <div class="footer-container">
        <p class="footer-container-headline">SUPPORT</p>
        <a href="#">FAQ</a>
        <a href="#">Contact us</a>
        <a href="#">Live chat</a>
        <a href="#">Phone call</a>
    </div>
    <div class="footer-container">
        <p class="footer-container-headline">ENJOY YOUR LIFE</p>
        <p class="footer-container-nomaltext">
            I really think that i am a awesome boy in a palce named Earth.
        </p>
        <div id="footer-container-icon">
        <a href="#"><img src="https://i.loli.net/2018/06/27/5b32e5442b69e.png"></a>
        <a href="#"><img src="https://i.loli.net/2018/06/27/5b32e54417af6.png"></a>
        <a href="#"><img src="https://i.loli.net/2018/06/27/5b32e54419375.png"></a>
        <a href="#"><img src="https://i.loli.net/2018/06/27/5b32e54429f18.png"></a>
        <a href="#"><img src="https://i.loli.net/2018/06/27/5b32e5441abf5.png"></a>
        <a href="#"><img src="https://i.loli.net/2018/06/27/5b32e5441c3b0.png"></a>
        </div>
    </div>
</div>
<!-- 页脚布局结束 -->
</body>
</html>